<!doctype html>
<html lang="en" style="background:pink;">
<head>
	<meta charset="UTF-8">
	<title>js</title>
	<style>
		*{
			margin: 0px;
			padding: 0px;
		}

		 #imgid{

			top:0px;
			left:0px;
			position: absolute;/* 定位：脱离文档流,body的高度就不存在了 */
			/* overflow: hidden; */
			
		} 

		  img{
		 	width:120px; height:120px;
			display: block;
			border-radius: 50%;
		}
	</style>
</head>
<body style="background:pink;">
	
		<img src="a.jpg" alt="" style="" id="imgid">

	
</body>

<script>
//html占满整个屏幕
//body是实体，是一个div。


	imgobj=document.getElementById('imgid');

	imgobj.onload=function(){
		//可视区域高
		screenHeight=document.documentElement.clientHeight;
		imgHeight=imgobj.clientHeight;//图片的高度
		//alert(imgHeight);
		diffHeight=screenHeight-imgHeight;//差值。有效高度-图片的高度

		//可视区域宽
		screenWidth=document.documentElement.clientWidth;
		imgWidth=imgobj.clientWidth;//图片的高度
		diffWidth=screenWidth-imgWidth;//差值。有效高度-图片的宽度

		//alert(imgid);//也可以生成div元素对象
		ys=0;
		yv=10;

		xs=0;
		xv=10;
		setInterval(function(){

			//y轴
			ys+=yv;
			if(ys>=diffHeight){
				ys=diffHeight;
				yv=-yv;
			}
			if(ys<=0){
				yv=-yv;//yv=-(-10)
			}
			document.title=ys+'-'+diffHeight;
			imgobj.style.top=ys+'px';

			//x轴
			xs+=xv;
			if(xs>=diffWidth){
				xs=diffWidth;
				xv=-xv;
			}
			if(xs<=0){
				xv=-xv;//xv=-(-10)
			}
			document.title=xs+'-'+diffWidth;
			imgobj.style.left=xs+'px';


		},100)
	}


	
	
	
</script>
</html>